<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>xxx首页</title>
    <link rel="stylesheet" href="restart.css">
</head>
<style>
@media screen and (max-width: 800px){

.text1{
    width: 400px !important;
}
.text2{
    width: 400px !important;
}
.goodslist{
    width: 400px !important;
}
}
.main{
width: 100%;
height: 100%;
}
.top{
width: 75%;
margin: 0 auto;

}
.topp1{
width: 200px;
height: 60px;
float: left;
}
.topp2{
width: 95px;
height: 45px;

}
.topp3{
width: 95px;
height: 45px;

}
.fr{
float: right;
}
.clear:after{
clear: both;
content: '';
display: block;


}
.text2,
.text1{
width: 800px;
text-align: center;
margin: 0 auto;   
}
.text2>a,/*text2 下面的a元素运用此属性*/
.text1>a{
margin-right: 40px;

}
.headp{
text-align: center;



}
.headp>img{
width: auto;
max-width: 100%;
}
.goodslist{
width: 800px;
margin: 0 auto;
}
.goodsbox{
width: 160px;
text-align: center;
margin-right: 40px;
}
.fl{
float: left;
}
.p{
display: block;
text-align: center;
}
.foot{
background-image: url(images/work2_41.jpg);
width: 100%;
height: 150px;
}
.footp1{
text-align: center;
}
.footp2{
text-align: center;
height: 25px ;
width: 100%;
}
img:hover{
transform: scale(1.1,1.1)

}
button{
color: green;
}

</style>
<body>
    <div class="main">
        <div class="top clear">
            <div class="topp1"><img src="img/1.jpg" alt=""></div>
            <div class="topp2 fr"><img src="img/3.jpg" alt=""></div>
            <div class="topp3 fr"><img src="img/2.jpg" alt=""></div>

           
        </div>
         <div class="text1">
                <a href="" style="text-decoration:none">网站首页</a>
                <a href="" style="text-decoration:none">新品上市</a>
                 <a href="" style="text-decoration:none">女装</a>
                 <a href="" style="text-decoration:none">男装</a>
                 <a href="" style="text-decoration:none">品牌故事</a>
                 <a href="" style="text-decoration:none">lookbook</a>
                 <a href="" style="text-decoration:none">关于我们</a>
         </div>
        <div class="headp"><img src="img/4.jpg" alt=""></div>
        <div class="text2">
            <a href="" style="text-decoration:none">全部</a>
            <a href="" style="text-decoration:none">2017秋冬新品</a>
            <a href="" style="text-decoration:none">女装新品专区</a>
            <a href="" style="text-decoration:none">男装新品专区</a>
            <a href="" style="text-decoration:none">时尚配饰与礼包</a>
        </div>
        <div class="goodslist clear">
            <div class="goodsbox fl">
                <div class="texiao"><img src="img/11.jpg" alt=""></div>
                <div>棉质斜纹裤</div>
                <div>￥199</div>
                <div><button>立即购买</button></div>
            </div>
            <div class="goodsbox fl">
                    <div><img src="img/12.jpg" alt=""></div>
                    <div>杏色妮子衣</div>
                    <div>￥199</div>
                    <div><button>立即购买</button></div>
            </div>
            <div class="goodsbox fl">
                    <div><img src="img/13.jpg" alt=""></div>
                    <div>时尚男外套</div>
                    <div>￥199</div>
                    <div><button>立即购买</button></div>
            </div>
            <div class="goodsbox fl">
                    <div><img src="img/14.jpg" alt=""></div>
                    <div>连帽羽绒服</div>
                    <div>￥199</div>
                    <div><button>立即购买</button></div>
            </div>
            <div class="goodsbox fl">
                    <div><img src="img/15.jpg" alt=""></div>
                    <div>棉质斜纹裤</div>
                    <div>￥199</div>
                    <div><button>立即购买</button></div>
                </div>
                <div class="goodsbox fl">
                        <div><img src="img/16.jpg" alt=""></div>
                        <div>杏色妮子衣</div>
                        <div>￥199</div>
                        <div><button>立即购买</button></div>
                </div>
                <div class="goodsbox fl">
                        <div><img src="img/17.jpg" alt=""></div>
                        <div>时尚男外套</div>
                        <div>￥199</div>
                        <div><button>立即购买</button></div>
                </div>
                <div class="goodsbox fl">
                        <div><img src="img/18.jpg" alt=""></div>
                        <div>连帽羽绒服</div>
                        <div>￥199</div>
                        <div><button>立即购买</button></div>
                </div>
        </div>
        <br>
        <br>
        <p class="p"><button>加载更多</button></p>
        <div class="foot">
            <div class="footp1"><img src="img/5.jpg" alt=""></div>
            <div class="footp2">
                <img src="img/8.jpg" alt="">
                <img src="img/6.jpg" alt="">
                <img src="img/7.png" alt="">
            </div>
        </div>
        <div></div>
    </div>
</body>
</html>